<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      坐标系：<input
        style="height: 15px"
        onkeydown="fn2()"
        onclick="this.select()"
      />
    </div>
    <svg id="svg" width="500" height="500"></svg>
  </body>
</html>
<script src="view.js"></script>
<script>
  const data = [
    { name: "zzt", sal: 4500 },
    { name: "dmc", sal: 2000 },
    { name: "boge", sal: 4000 },
    { name: "ella", sal: 2500 },
    { name: "andy", sal: 1500 },
  ];

  //确定坐标范围，y轴为max(sal), x为count(name) ;
  const view_width = data.length;
  let view_height = data.map((e) => e.sal).reduce((e1, e2) => Math.max(e1, e2));
  //height取整  55
  const unit = Math.pow(10, (view_height + "").length - 1);
  console.log(view_height);
  console.log(unit);
  console.log(view_height % unit);
  view_height =
    view_height % unit == 0
      ? view_height + unit
      : parseInt(view_height / unit + 1) * unit;
  console.log(view_height);

  createViewBox(0, 0, view_height, view_height);

  //计算横向比例
  const ratio = view_height / view_width; //横坐标需要*上该比例

  //计算坐标
  const points = [];
  data.forEach((e, i) => {
    points.push({
      x: `${i * ratio + ratio / 2}`,
      y: `${e.sal}`,
    });
  });

  const svg = document.querySelector("#svg");

  //绘制面积
  let d = `M${points[0].x} ${view_height}`;
  points.forEach((e, i) => {
    d += `L${e.x} ${view_height - e.y}`;
  });
  d += `V${view_height}`;
  let path = document.createElementNS(ns, "path");
  path.setAttribute("d", d);
  path.setAttribute("fill", "#8CA2E3");
  path.setAttribute("fill-opacity", 0.8);
  svg.appendChild(path);

  //绘制折线
  d = ``;
  points.forEach((e, i) => {
    if (i == 0) {
      d += `M`;
    } else {
      d += `L`;
    }
    d += `${e.x} ${view_height - e.y}`;
  });
  path = document.createElementNS(ns, "path");
  path.setAttribute("d", d);
  path.setAttribute("stroke", "#00f");
  path.setAttribute("stroke-width", 0.5 * viewRatio);
  path.setAttribute("fill", "none");
  svg.appendChild(path);

  //绘制点 装载文字
  points.forEach((point, i) => {
    const c = document.createElementNS(ns, "circle");
    c.setAttribute("cx", point.x);
    c.setAttribute("cy", view_height - point.y);
    c.setAttribute("r", 1 * viewRatio);
    c.setAttribute("fill", "#fff");
    c.setAttribute("stroke", "#f00");
    c.setAttribute("stroke-width", 20);

    const text = document.createElementNS(ns, "text");
    text.setAttribute("x", point.x);
    text.setAttribute("y", view_height - 100);
    text.setAttribute("font-size", 4 * viewRatio);
    text.setAttribute("font-weight", "bold");
    text.setAttribute("text-anchor", "middle");
    text.innerHTML = data[i].name;

    svg.appendChild(c);
    svg.appendChild(text);
  });

  //设置鼠标移入效果，圆圈放大，有数字提示文字
  const cs = document.querySelectorAll("circle");
  cs.forEach((c, i) => {
    c.onmouseover = function () {
      const text = document.createElementNS(ns, "text");
      text.setAttribute("x", parseInt(points[i].x) + 80);
      text.setAttribute("y", view_height - points[i].y);
      text.innerHTML = data[i].sal;
      text.setAttribute("font-size", 3 * viewRatio);
      text.style.padding = "10px";
      text.style.border = "1px solid #000";
      svg.appendChild(text);

      const r = c.getAttribute("r");
      c.style.cursor = "pointer";
      c.setAttribute("r", parseInt(r) + 20);
      c.onmouseout = function () {
        this.setAttribute("r", r);
        svg.removeChild(text);
        this.onmouseout = null;
      };
    };
  });
</script>
